<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <title>iD</title>
        <link rel='stylesheet' href='css/reset.css'>
        <link rel='stylesheet' href='css/map.css'>
        <link rel='stylesheet' href='css/app.css'>

        <!-- mobile devices -->
        <meta name='viewport' content='initial-scale=1.0 maximum-scale=1.0'>
        <meta name='apple-mobile-web-app-capable' content='yes' />
        <meta name='apple-mobile-web-app-status-bar-style' content='black-translucent' />

        <script src='dist/iD.js'></script>
    </head>
    <body>
        <div id='id-container'></div>
        <script>

        id = iD.Context()
            .assetPath('dist/');

        id.ui()(document.getElementById('id-container'), function() {
            iD.d3.select('#about-list')
                .insert('li', '.user-list')
                .attr('class', 'source-switch')
                .call(iD.uiSourceSwitch(id)
                    .keys([
                        {
                            'urlroot': 'http://www.openstreetmap.org',
                            'oauth_consumer_key': '5A043yRSEugj4DJ5TljuapfnrflWDte8jTOcWLlT',
                            'oauth_secret': 'aB3jKq1TRsCOUrfOIZ6oQMEDmv2ptV76PA54NGLL'
                        },
                        {
                            'urlroot': 'http://api06.dev.openstreetmap.org',
                            'oauth_consumer_key': 'zwQZFivccHkLs3a8Rq5CoS412fE5aPCXDw9DZj7R',
                            'oauth_secret': 'aMnOOCwExO2XYtRVWJ1bI9QOdqh1cay2UgpbhA6p'
                        }
                    ])
                );
        });

        </script>
    </body>
</html>
